<template>
    <div id="line-area" ref="canvas" class="canvas" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
// import { createPinia } from 'pinia'
import * as echarts from 'echarts/core';
import { GridComponent, type GridComponentOption,
    MarkPointComponent,
    type MarkPointComponentOption } from 'echarts/components';
import { LineChart, type LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
// import { useChartsStore } from '@/stores/charts';
// const pinia = createPinia();
// const chartStore = useChartsStore(pinia)

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition,MarkPointComponent]);

type EChartsOption = echarts.ComposeOption<
  GridComponentOption | LineSeriesOption | MarkPointComponentOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })
onMounted(() => {
    var chartDom = document.getElementById('line-area')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        grid: {
            top: 60,
            left: 0,
            right: '2%',
            bottom: 0,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: props.data.xAxisDataList,
            
        },
        yAxis: {
            type: 'value',
            splitLine:{show:true, lineStyle:{color: '#5e6056'}},
        },
        series: [
            {
                data: props.data.seriesDataList,
                type: 'line',
                smooth: true,
                areaStyle: { color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#f0f23e' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#fefeec' // 100% 处的颜色
                    }],
                    global: false
                } },
                markPoint: {
                    label: { color: '#000000' },
                    data: [ { type: 'max'}, { type: 'min'} ],
                    itemStyle: { color: '#f0f23e' },
                    
                }
            }
        ]
    };

    option && myChart.setOption(option);
})
</script>

<style scope>
</style>
